<template>
	<u-form ref="uForm" :model="formDatas" label-width="220rpx">

		<!-- 姓名 -->
		<u-form-item label="姓名" prop="name">
			<u-input v-model="formDatas.name" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 性别 -->
		<u-form-item label="性别" prop="sex">
			<u-radio-group v-model="formDatas.sex">
				<u-radio :name="1" :disabled="!isEdit">男</u-radio>
				<u-radio :name="2" :disabled="!isEdit">女</u-radio>
			</u-radio-group>
		</u-form-item>

		<!-- 文化程度 -->
		<u-form-item label="文化程度" prop="education">
			<u-input v-model="formDatas.education" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 身份证号 -->
		<u-form-item label="身份证号" prop="idcard">
			<u-input v-model="formDatas.idcard" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 电话 -->
		<u-form-item label="电话" prop="phone">
			<u-input v-model="formDatas.phone" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 联系地址 -->
		<u-form-item label="联系地址" prop="addr">
			<u-input v-model="formDatas.addr" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 民族 -->
		<u-form-item label="民族" prop="nation">
			<u-input v-model="formDatas.nation" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 政治面貌 -->
		<u-form-item label="政治面貌" prop="political">
			<u-input v-model="formDatas.political" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 毕业院校 -->
		<u-form-item label="毕业院校" prop="gdsl">
			<u-input v-model="formDatas.gdsl" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 学位 -->
		<u-form-item label="学位" prop="degree">
			<u-input v-model="formDatas.degree" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 籍贯 -->
		<u-form-item label="籍贯" prop="nate">
			<u-input v-model="formDatas.nate" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 户籍 -->
		<u-form-item label="户籍" prop="census">
			<u-input v-model="formDatas.census" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 国籍 -->
		<u-form-item label="国籍" prop="nationality">
			<u-input v-model="formDatas.nationality" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 出生日期 -->
		<u-form-item label="出生日期" prop="birth">
			<u-input type="select" v-model="formDatas.birth" @click="showBirth = true" :disabled="!isEdit" />
			<u-calendar v-model="showBirth" :mode="'date'" @change="changeBirth"></u-calendar>
		</u-form-item>

		<!-- 毕业时间 -->
		<u-form-item label="毕业时间" prop="gdtm">
			<u-input type="select" v-model="formDatas.gdtm" @click="showGdtm = true" :disabled="!isEdit" />
			<u-calendar v-model="showGdtm" :mode="'date'" @change="changeGdtm" :max-date="'3000-01-01'"></u-calendar>
		</u-form-item>

		<!-- 工作经历 -->
		<u-form-item label="工作经历" prop="experience">
			<u-input type="textarea" v-model="formDatas.experience" :disabled="!isEdit"></u-input>
		</u-form-item>

		<!-- 准考证头像 -->
		<u-form-item label="准考证头像" prop="icon">
			<upload :idPic.sync="formDatas.icon" :disabled="!isEdit"></upload>
		</u-form-item>

		<!-- 身份证正面 -->
		<u-form-item label="身份证正面照片" prop="idpic">
			<upload :idPic.sync="formDatas.idpic" :disabled="!isEdit"></upload>
		</u-form-item>

		<!-- 身份证背面 -->
		<u-form-item label="身份证背面照片" prop="idrpic">
			<upload :idPic.sync="formDatas.idrpic" :disabled="!isEdit"></upload>
		</u-form-item>

		<slot :formData="formDatas"></slot>
	</u-form>
</template>

<script>
	import upload from "@/components/upload.vue"
	export default {
		components: {
			upload
		},
		props: {
			isEdit: {
				//是否为编辑状态
				type: Boolean,
				default: true,
			},
			formData: {
				type: Object,
				default: () => {
					return{
						name: "", //姓名
						sex: "", //性别 1-男、2-女
						education: "", //文化程度
						idcard: "", //身份证号
						phone: "", //电话号码
						gdsl: "", //毕业院校
						gdtm: "", //毕业时间
						degree: "", //学位
						experience: "", //工作经历
						idpic: "", //身份证正面图片
						idrpic: "", //身份证背面图片
						nate: "", //籍贯
						census: "", //户籍
						birth: "", //出生日期
						addr: "", //联系地址
						nation: "", //民族
						political: "", //政治面貌
						nationality: "", //国籍
						icon:""//准考证的头像
					}
				}
			},
		},
		data() {
			return {
				formDatas: {},
				showGdtm: false, //显示毕业弹窗
				showBirth: false, //显示生日弹窗
				rules: {
					//验证规则
					name: [{
						required: true,
						trigger: "blur",
						message: "请输入姓名",
					}, ],
					sex: [{
						required: true,
						trigger: "blur",
						type: "number",
						message: "请选择性别",
					}, ],
					education: [{
						required: true,
						trigger: "blur",
						message: "请输入文化程度",
					}, ],
					idcard: [{
							required: true,
							trigger: "blur",
							message: "请输入身份证号",
						},
						{
							trigger: "blur",
							pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
							message: "请输入正确的身份证号码",
						},
					],
					phone: [{
							required: true,
							trigger: "blur",
							message: "请输入电话号码",
						},
						{
							trigger: "blur",
							pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
							message: "请输入正确的手机号码",
						},
					],
					gdsl: [{
						required: true,
						trigger: "blur",
						message: "请输入毕业院校",
					}, ],
					gdtm: [{
						required: true,
						trigger: "blur",
						message: "请输入毕业时间",
					}, ],
					degree: [{
						required: true,
						trigger: "blur",
						message: "请输入学位",
					}, ],
					experience: [{
						required: true,
						trigger: "blur",
						message: "请输入工作经历",
					}, ],
					nate: [{
						required: true,
						trigger: "blur",
						message: "请输入籍贯",
					}, ],
					census: [{
						required: true,
						trigger: "blur",
						message: "请输入户籍",
					}, ],
					birth: [{
						required: true,
						trigger: "blur",
						message: "请输入出生日期",
					}, ],
					addr: [{
						required: true,
						trigger: "blur",
						message: "请输入联请输入系地址",
					}, ],
					nation: [{
						required: true,
						trigger: "blur",
						message: "请输入民族",
					}, ],
					political: [{
						required: true,
						trigger: "blur",
						message: "请输入政治面貌",
					}, ],
					nationality: [{
						required: true,
						trigger: "blur",
						message: "请输入国籍",
					}, ],
					icon: [{
						required: true,
						trigger: "blur",
						message: "请上传准考证照片",
					}, ],
					idpic: [{
						required: true,
						trigger: "blur",
						message: "请上传身份证正面照片",
					}, ],
					idrpic: [{
						required: true,
						trigger: "blur",
						message: "请上传身份证背面照片",
					}, ],
				},
			}
		},
		watch:{
			formData:{
				handler(val){
					this.formDatas = val
					
				},
				immediate:true,
				deep:true
			}
		},
		methods: {
			changeGdtm(e) { //更换毕业日期
				this.formDatas.gdtm = e.result
			},
			changeBirth(e) { //更换生日日期
				this.formDatas.birth = e.result
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
</style>